<template>
    <div class="blessing"
         :class="{'global_love':$store.state.nowTime==='moon'}">
       <div class="left">
           <img :src="background" alt="" >
       </div>
        <div class="right">
            <p class="title"> <slot name="title">祝福标题</slot> </p>
            <p>
                <img :src="card" alt="" style="width: 24px;">
                <slot name="content">默认文字</slot>
            </p>
        </div>
    </div>

</template>

<script>
export default {
    name: "LoveCards",
    props:['background','card']
}
</script>

<style scoped>
.blessing{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 300px;
    height: 90px;
    border-radius: 5px;
    transition: all .3s;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    color: #8f8c8c;
}
.blessing:hover{
    transform: scale(1.05);
}
.left{
    padding: 1vw;
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left img{
    width: 50px
}
.right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.right p{
    display: flex;
    justify-content: left;
    align-items: center;
}
.title{
    width: 100%;
    font-size: 20px;
    padding-bottom: 5px;
    text-align: center;
}
</style>